<template>
  <div style="border: 1px solid #ccc; z-index: 100">
    <!-- 工具栏 -->
    <Toolbar
      :editor-id="editorId"
      :default-config="toolbarConfig"
      style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <Editor
      :editor-id="editorId"
      :default-config="editorConfig"
      :default-content="getDefaultContent"
      style="height: 500px"
      @onChange="onChange"/>
  </div>
</template>

<script>
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
import cloneDeep from 'lodash.clonedeep'
import { crmFileSaveAPI } from '@/api/common'

export default {
  name: 'MyEditor',
  components: { Editor, Toolbar },
  props: {
    // 编辑器的默认内容，只在初始化时使用
    defaultContent: {
      type: Array,
      required: false
    },
    editorConfig: {
      type: Object,
      required: true
    },
    toolbarConfig: {
      type: Object,
      required: false
    },
    batchId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editorId: `wangEditor-${Math.random().toString()}` // 定义一个编辑器 id ，要求：全局唯一且不变。重要！！！
      // batchId: ''
    }
  },
  computed: {
    getDefaultContent() {
      return cloneDeep(this.defaultContent) // 深拷贝，重要！！！
    }
  },
  created() {
    this.$bus.on('upload-report-file-bus', batchId => {
      if (this.batchId == '') {
        this.batchId = batchId
        this.$emit('update:batchId', this.batchId)
      }
    })

    const _this = this
    this.editorConfig.MENU_CONF['uploadImage'] = {
      server: '',
      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 50 * 1024 * 1024, // 1M

      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 3,
      // 自定义上传
      async customUpload(file, insertFn) {
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        crmFileSaveAPI({
          file: file,
          type: 'img',
          batchId: _this.batchId
        }).then(res => {
          if (res.code == 0) {
            // if (_this.batchId == '') {
            //   _this.batchId = res.data.batchId
            //   // 跟Xhfiles组件互通batchId
            //   // _this.$bus.emit('upload-report-file-bus', res.data.batchId)
            //   _this.$emit('update:batchId', this.batchId)
            // }
            const baseApi = process.env.BASE_API.lastIndexOf('/') == 0 ? process.env.BASE_API.substring(0, baseApi.length - 1) : process.env.BASE_API
            insertFn(`${baseApi}/adminFile/down/${res.data.fileId}`, res.data.name, undefined)
          } else {
            _this.$message.error('图片上传失败')
          }
        }).catch(e => {
          _this.$message.error('图片上传失败')
        })
        // 最后插入图片
      }
      // // 自定义插入图片
      // customInsert(res, insertFn) {
      //     // res 即服务端的返回结果

      //     // 从 res 中找到 url alt href ，然后插图图片
      //     insertFn(url, alt, href)
      // }
    }
  },
  beforeDestroy() {
    try {
      const editor = getEditor(this.editorId)
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器 ，重要！！！
      removeEditor(this.editorId)
      this.$bus.off('upload-report-file-bus')
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    onChange(editor) {
      this.$emit('change', editor)
    },
    clear() {
      const editor = getEditor(this.editorId)
      if (editor == null) return
      editor.clear()
    }
  }
}
</script>

<!-- 记得引入 wangEditor css 文件，重要 ！！！ -->
<style src="@wangeditor/editor/dist/css/style.css"></style>
